<template>
  <div>
    <div class="map" ref="myEcharsMap"></div>
  </div>
</template>
<script>
import *as echarts from 'echarts'
import mapJson from '../assets/otherJson/china.json'
export default {
  props:{
    mapList:{
      type:Array,
      default:function(){
        return []
      }
    }
  },
  watch:{
    mapList(){
      this.mapChars()
    }
  },
  methods:{
    mapChars(){
      let myChart = echarts.init(this.$refs.myEcharsMap);
      echarts.registerMap('china',mapJson)
      let options = {
        title: {
          subtext: "全国疫情分布图",
          left:'20px',
          textStyle: {
            color: "#666666",
            fontSize: 30,
          },
          subtextStyle: {
            color: "#000000",
            fontSize: 16,
            fontWeight: 'bold'
          },
        },
        tooltip: {
          triggerOn: "click",
          formatter: function(e, t, n) {
            return "地区：" + e.name + "<br />" +  "确诊：" + e.value + '人';
          },
        },
        // 热力地图
        visualMap: {
          min: 0,
          left: 20,
          textStyle: {
            color: "#999999",
          },
          pieces: [
            {
              gte: 10000,
              label: "> 10000 人",
              color: "rgb(189,9,9)",
            },
            {
              gte: 1000,
              lte: 9999,
              label: "1000 - 9999 人",
              color: "rgb(230,69,70)",
            },
            {
              gte: 100,
              lte: 999,
              label: "100 - 999 人",
              color: "rgb(245,117,103)",
            },
            {
              gte: 10,
              lte: 99,
              label: "10 - 99 人",
              color: "rgb(255,153,133)",
            },
            {
              gte: 1,
              lte: 9,
              label: "1 - 9 人",
              color: "rgb(255,229,219)",
            },
            {
              value: 0,
              label: "无",
              color: "#eee",
            },
          ],
        },

        series: [
          {
            name: "确诊人数",
            data: this.mapList,
            type: "map",
            map: "china",
            zoom: 1.2,
            aspectScale: 0.75,
            label: {
              // 默认文本标签样式
              normal: {
                color: "black",
                show: true,
              },
              // 高亮文本标签样式
              // emphasis: {
              //   fontSize: 22,
              //   fontWeight: "bold",
              // },
            },
            itemStyle: {
              // 默认区域样式
              normal: {
                // 区域背景透明
                areaColor: "transparent",
                borderColor: "rgba(39,211,233, 1)",
                borderWidth: 1,
              },
              // 高亮区域样式
              emphasis: {
                // 高亮区域背景色
                areaColor: "rgba(254,222,50, 1)",
              },
            },
          },
        ],
      };

      myChart.setOption(options);
    }
  }
}
</script>
<style scoped>
.map{
  width: 770px;
  height: 620px;
}
</style>